<!--

-->
<template>
    <vxe-modal v-model="visible" :min-width="layout.modalMinWidth(700)" :position="{top: '60px'}" :title="title" :width="layout.modalWidth(800)" destroy-on-close resize show-footer show-maximize :height="layout.modalHeight(700)" @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="120px">
            <el-form-item :style="layout.col2" label="类型" prop="type">
                <el-radio-group v-model="state.model.type" @change="typeChange">
                    <el-radio-button :value="0">目录</el-radio-button>
                    <el-radio-button :value="1">页面</el-radio-button>
                    <el-radio-button :value="2">功能</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="state.model.type===1" :style="layout.col2" label="打开方式" prop="openType">
                <el-radio-group v-model="state.model.openType">
                    <el-radio-button value="1">组件</el-radio-button>
                    <el-radio-button value="2">内链</el-radio-button>
                    <el-radio-button value="3">外链</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="state.model.type===1||state.model.type===2" :style="layout.col2" label="上级菜单" prop="pid">
                <el-tree-select v-model="state.model.pid" :check-strictly="true" :data="state.tree" :props="{label: 'name', children: 'children'}" :render-after-expand="false" style="width: 100%" value-key="id" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="名称" prop="name">
                <el-input v-model="state.model.name" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="编号" prop="code">
                <el-input v-model="state.model.code" @change="onCodeChange"/>
            </el-form-item>
            <el-form-item v-show="state.model.type===1&&state.model.openType==='1'" :style="layout.col2" label="地址" prop="router">
                <el-input v-model="state.model.router" />
            </el-form-item>
            <el-form-item v-show="state.model.type===1&&(state.model.openType==='2'||state.model.openType==='3')" :style="layout.col2" label="地址" prop="link">
                <el-input v-model="state.model.link" placeholder="https://" />
            </el-form-item>
            <el-form-item v-show="state.model.type===2" :style="layout.col1" label="权限" prop="permission">
                <PermissionList v-model="state.model.permission" />
            </el-form-item>
            <el-form-item :style="layout.col2" label="是否启用" prop="visible">
                <el-radio-group v-model="state.model.visible">
                    <el-radio :value="true">启用</el-radio>
                    <el-radio :value="false">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="state.model.type===0||state.model.type===1" :style="layout.col2" label="图标" prop="icon">
                <el-input v-model="state.model.icon" />
            </el-form-item>
            <template v-if="state.model.type===1">
                <el-form-item :style="layout.col2" label="锁定数据权限" prop="isLockDataPermission">
                    <el-radio-group v-model="state.model.isLockDataPermission">
                        <el-radio :value="0">不锁定</el-radio>
                        <el-radio :value="1">锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="state.model.isLockDataPermission === 1" :style="layout.col1" label="数据权限" prop="dataPermission">
                    <el-radio-group v-model="state.model.dataPermission">
                        <el-radio :value="0">全部</el-radio>
                        <el-radio :value="1">组织(包含子组织)</el-radio>
                        <el-radio :value="2">组织(当前)</el-radio>
                        <el-radio :value="3">个人</el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
            <el-form-item :style="layout.col2" label="排序" prop="sort">
                <el-input-number v-model="state.model.sort" :min="0" controls-position="right" style="width: 100%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import PermissionList from "./Components/PermissionList.vue"
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {
        id: null,
        name: null,
        code: null,
        type: 0,
        openType: null,
        visible: true,
        icon: null,
        sort: 0,
        router: null,
        link: null,
        permission: null,
        pid: null
    }
}

// 校验规则
const rules = computed(() => {
    return {
        name: [{required: true, message: "请输入名称"}],
        code: [{required: true, message: "请输入编号"}],
        openType: [{required: state.model.type === 1, message: "请设置打开方式"}],
        pid: [{required: state.model.type > 0, validator: customRules.pid}],
        router: [{required: state.model.type === 1 && state.model.openType === '1', message: "请输入页面地址"}],
        link: [{required: state.model.type === 1 && (state.model.openType === 2 || state.model.openType === '3'), message: "请输入页面地址"}],
        permission: [{required: state.model.type === 2, message: "请设置权限"}],
        dataPermission: [{required: state.model.isLockDataPermission === 1, message: "请设置数据权限"}]
    }
})

// 自定义校验规则
const customRules = {
    pid: (rule, value, callback) => {
        if (state.model.type > 0) {
            if (!value) return callback(new Error("请选择上级菜单"));
        }
        return true;
    },
};
// 编号变化
function onCodeChange(v) {
    if (!state.model.name) {
        if (v.indexOf(":Add") > -1) {
            state.model.name = "添加"
        }
        if (v.indexOf(":Delete") > -1) {
            state.model.name = "删除"
        }
        if (v.indexOf(":Update") > -1) {
            state.model.name = "修改"
        }
        if (v.indexOf(":Get") > -1) {
            state.model.name = "查询"
        }
    }
}

function typeChange() {
    state.model.pid = 0;
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    if (state.options) {
        state.model = {...state.model, ...state.options}
    }
    await $sleep(1000)
    // 初始化数据
    api.GetMenuTreeList().then(({success, data}) => {
    //     if (!success) return 0;
        state.tree = data;
    });
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    // console.log("submit: ", state.model)
    const body = {...state.model}
    const {success, data} = await api[state.model.id ? 'UpdateMenuInfo' : 'AddMenuInfo'](body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>

<style lang="scss" scoped>
.EditForm {
}
</style>
